
<template>
  <view class="container_all">
    <!-- 顶部横幅 -->
    <view class="header">
      <image class="logo" :src="logoUrl" mode="aspectFit" />
      <view class="header-content">
        <text class="title">青岛海洋志愿者</text>
        <text class="slogan">守护碧海蓝天，共创美好未来</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 组织使命 -->
      <view class="mission-section">
        <view class="section-title">
          <uni-icons type="info" size="20" color="#0066CC"></uni-icons>
          <text>组织使命</text>
        </view>
        <view class="mission-card">
          <image class="mission-image" :src="missionImageUrl" mode="aspectFill" />
          <text class="mission-text">致力于海洋生态保护，推动可持续发展，培养海洋环保意识，建设美丽海洋家园。</text>
        </view>
      </view>

      <!-- 服务项目 -->
      <view class="projects-section">
        <view class="section-title">
          <uni-icons type="star" size="20" color="#0066CC"></uni-icons>
          <text>服务项目</text>
        </view>
        <scroll-view scroll-x class="projects-scroll" show-scrollbar="false">
          <view class="project-cards">
            <view v-for="(project, index) in projects" :key="index" class="project-card">
              <image :src="project.image" mode="aspectFill" class="project-image" />
              <text class="project-name">{{ project.name }}</text>
              <text class="project-desc">{{ project.description }}</text>
              
            </view>
          </view>
        </scroll-view>
      </view>

		<view class="section-title">
          <uni-icons type="calendar" size="20" color="#0066CC"></uni-icons>
          <text>活动日历</text>
        </view>
      <!-- 志愿者统计 -->
      <view class="stats-section">
        <view class="stat-card">
          <text class="stat-number">5000+</text>
          <text class="stat-label">注册志愿者</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">200+</text>
          <text class="stat-label">年度活动</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">10000+</text>
          <text class="stat-label">服务时长</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/7ce61080ef81a8084449571a0ac034ee.jpg';

const missionImageUrl = 'https://ai-public.mastergo.com/ai/img_res/668f77a7f1210f1e175bc5d29c2a306a.jpg';

const projects = ref([
  {
    name: '海滩清洁行动',
    description: '定期组织海滩垃圾清理活动，保护海洋生态环境',
    image: 'https://ai-public.mastergo.com/ai/img_res/55967d7603d13a931dae6b16a66e6974.jpg'
  },
  {
    name: '海洋生物保护',
    description: '关注海洋生物多样性，开展保护教育活动',
    image: 'https://ai-public.mastergo.com/ai/img_res/3684e345af48f8e080320c7c349d0227.jpg'
  },
  {
    name: '环保宣传教育',
    description: '面向社会开展海洋环保知识普及活动',
    image: 'https://ai-public.mastergo.com/ai/img_res/f4838e6894e8e564bc57c8599fd8964c.jpg'
  }
]);

const events = ref([
  {
    date: '1月15日',
    title: '海滩清洁日活动'
  },
  {
    date: '1月20日',
    title: '海洋生物观察活动'
  },
  {
    date: '1月25日',
    title: '环保知识讲座'
  }
]);
</script>

<style>
page {
  height: 100%;
}

.container_all {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #F5F7FA;
}

.header {
  background-color: #0066CC;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.header-content {
  display: flex;
  flex-direction: column;
}

.title {
  color: #FFFFFF;
  font-size: 32px;
  font-weight: bold;
}

.slogan {
  color: #E6F3FF;
  font-size: 14px;
  margin-top: 10rpx;
}

.content {
  width: 95%;
  margin: 20rpx auto;
  flex: 1;
  overflow: auto;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.section-title uni-icons {
  margin-right: 10rpx;
}

.mission-section {
  margin-bottom: 40rpx;
}

.mission-card {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.mission-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.mission-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
}

.projects-scroll {
  width: 100%;
}

.project-cards {
  display: flex;
  padding: 20rpx 0;
}

.project-card {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-right: 20rpx;
  width: 300rpx;
  flex-shrink: 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.project-image {
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
  margin-bottom: 16rpx;
}

.project-name {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  display: block;
}

.project-desc {
  font-size: 12px;
  color: #666666;
  margin-bottom: 16rpx;
  display: block;
  height: 72rpx;
  overflow: hidden;
}

.learn-more-btn {
  background-color: #0066CC;
  color: #FFFFFF;
  font-size: 12px;
}

.calendar-section {
  margin: 40rpx 0;
}

.calendar-card {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.calendar-header {
  padding: 20rpx 0;
  border-bottom: 1px solid #EEEEEE;
}

.month {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.event-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #EEEEEE;
}

.event-date {
  font-size: 14px;
  color: #0066CC;
  width: 120rpx;
  flex-shrink: 0;
}

.event-title {
  flex: 1;
  font-size: 14px;
  color: #333333;
  margin: 0 20rpx;
}

.join-btn {
  background-color: #0066CC;
  color: #FFFFFF;
  font-size: 12px;
}

.stats-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.stat-card {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  width: 32%;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #0066CC;
  display: block;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 12px;
  color: #666666;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background-color: #FFFFFF;
  border-top: 1px solid #EEEEEE;
  flex-shrink: 0;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.tab-item text {
  font-size: 12px;
  color: #666666;
  margin-top: 6rpx;
}

.tab-item.active text {
  color: #0066CC;
}
</style>

